import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/// Chip组件非常强大，包括普通的Chip、ActionChiop、FilterChip、ChoiceChip，普通的Chip相当于tags标签，而且，
/// 这个标签还可以设置头像、图标，还有删除回调，而ActionChip则相当于可点击的Chip，
/// FilterChip则是可以选择和取消选择的Chip，并且有选中状态，选中后前面会显示“√”，
/// 而ChoiceChip相当于单选的Chip，点击Chip，也有选中状态等，下面是详细的案例：
class ChipPage extends StatefulWidget {
  @override
  ChipPageState createState() => new ChipPageState();
}

class ChipPageState extends State<ChipPage> {
  List<String> _tags = ['Android', 'IOS', 'Windows', 'macOS', 'Linux'];
  List<String> _selected = [];
  String _choice = 'IOS';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Chip')),
        body: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
          Wrap(
            spacing: 8.0,
            runSpacing: 8.0,
            children: [
              //普通圆角
              Chip(
                  label: Text(
                    'Flutter',
                    style: TextStyle(color: Colors.white),
                  ),
                  backgroundColor: Colors.blue),
              //带圆形头部并且是图片的chip
              Chip(
                label: Text('Flutter'),
                avatar: CircleAvatar(
                    backgroundImage:
                        NetworkImage('https://profile.csdnimg.cn/B/0/0/3_qq_35469691')),
              ),
              //带删除按钮的chip
              Chip(
                label: Text('Flutter', style: TextStyle(color: Colors.white)),
                backgroundColor: Colors.blue,
                onDeleted: () {},
                deleteIconColor: Colors.white,
                deleteIcon: Icon(Icons.delete, size: 20),
                deleteButtonTooltipMessage: '删除这个标签',
              )
            ],
          ),
          //分割线
          Divider(
            color: Colors.grey,
            height: 36.0,
          ),
          Wrap(
            spacing: 8,
            runSpacing: 8,
            children: _tags.map((e) {
              return Chip(
                  label: Text(e),
                  onDeleted: () {
                    setState(() {
                      _tags.remove(e);
                    });
                  });
            }).toList(),
          ),
          Wrap(
            spacing: 8,
            runSpacing: 8,
            children: _tags
                .map((e) => ActionChip(
                    label: Text(e),
                    onPressed: () {
                      print(e.toString());
                    }))
                .toList(),
          ),
          Divider(height: 30, color: Colors.grey),
          //用来展示选中的效果
          Container(
            width: 300,
            child: Text('$_choice'),
          ),
          Wrap(
            spacing: 8,
            runSpacing: 8,
            children: _tags
                .map((e) => ChoiceChip(
                    label: Text(e, style: TextStyle(color: Colors.white)),
                    selected: _choice == e,
                    selectedColor: Colors.blue,
                    onSelected: (v) {
                      setState(() {
                        _choice = e;
                      });
                    }))
                .toList(),
          )
        ]));
  }

  @override
  void initState() {
    super.initState();
  }
}
